@import 'tailwindcss';

.btn {
  @apply rounded-md border border-gray-300 bg-gray-100 text-sm transition hover:bg-gray-300 hover:text-white active:scale-90 disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-300 disabled:text-gray-500 disabled:hover:bg-gray-300 disabled:hover:text-gray-500 disabled:active:scale-100;
}

.btn-green {
  @apply border-green-300 bg-green-100 hover:bg-green-300;
}

.btn-red {
  @apply bg-red-500 hover:bg-red-600 text-white;
}

.btn-blue {
  @apply bg-blue-500 text-white hover:bg-blue-600;
}

.btn-yellow {
  @apply border-yellow-300 bg-yellow-100 hover:bg-yellow-300;
}

.btn-pink {
  @apply border-pink-300 bg-pink-100 hover:bg-pink-300;
}

.btn-purple {
  @apply border-purple-300 bg-purple-100 hover:bg-purple-300;
}
